<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/public.css"/>
		<link rel="stylesheet" type="text/css" href="./css/live.css"/>
	</head>
	<body>
		<div class="bar">
			<ul>
				<li><a href="javascript:;"><img src="img/live_bar01.png" /></a></li>
				<li><a href="javascript:;"><img src="img/live_bar02.png" /><span>收起</span></a></li>
				<li>
					<a href="javascript:;"><img src="img/live_bar03.png" /><span>提问</span></a>
					<div class="ask">
						<textarea>请输入您想提出的问题</textarea>
						<a class="ask-btn" href="javascript:;">提交</a>
					</div>
				</li>
				<li>
					<a href="javascript:;"><img src="img/live_bar04.png" /><span>答疑</span></a>
					<div class="kua kua-dy">
						<h2>老师答疑</h2>
						<div class="dy-box">
							<div class="dy-item">
								<div class="dy-item-main">
									<p class="dy-item-title">老师，禁止类和限制类药是指的那 些呀？</p>
									<p class="dy-item-time">
										<span class="s1">移动城堡</span>
										<span class="s2">2020-11-12 12:12:23</span>
									</p>
								</div>
								<div class="dy-item-main">
									<p class="dy-item-title">老师，禁止类和限制类药是指的那 些呀？</p>
									<p class="dy-item-time">
										<span class="s1">移动城堡</span>
										<span class="s2">2020-11-12 12:12:23</span>
									</p>
								</div>
								
							</div>
							<div class="dy-item">
								<div class="dy-item-main">
									<p class="dy-item-title">竞马杜方以及兴奋剂管理的药物， 含麻醉药品复方制剂的一些等。</p>
									<p class="dy-item-time">
										<span class="s1">移动城堡</span>
										<span class="s2">2020-11-12 12:12:23</span>
									</p>
								</div>
								<div class="dy-item-main">
									<p class="dy-item-title">老师，禁止类和限制类药是指的那 些呀？</p>
									<p class="dy-item-time">
										<span class="s1">移动城堡</span>
										<span class="s2">2020-11-12 12:12:23</span>
									</p>
								</div>
								
							</div>
						</div>
					</div>
				</li>
				<li>
					<a href="javascript:;"><img src="img/live_bar05.png" /><span>讲义</span></a>
					<div class="kua kua-jy">
						<h2>老师答疑</h2>
						<a class="jy-btn" href="javascript:;">下载讲义</a>
					</div>
				</li>
				<li><a href="javascript:;"><img src="img/live_bar06.png" /><span>练习</span></a></li>
			</ul>
		</div>
		<div class="main">
			<div class="video">
				<div class="video-tit">
					<div class="video-tit-l">
						<a href="javascript:;"><img src="img/live_icon01.png">雨露众德题库 ></a> 第一节真题模拟
					</div>
					<div class="video-tit-r">
							<a href="javascript:;"><img src="img/live_icon02.png">学习中心</a>
							<a href="javascript:;"><img src="img/live_icon03.png">APP下载</a>
					</div>
				</div>
				<div class="video-box">
					
					<div class="video-box-foot">
						<div class="video-box-tools">
						1234次播放
						<a href="javascript:;"><img src="img/live_icon04.png">课程评价</a>
						<a href="javascript:;"><img src="img/live_icon05.png">用手机看</a>
						</div>
						<div class="video-box-share">
							分享至：
							<a href="javascript:;"><img src="img/live_icon06.png"></a>
							<a href="javascript:;"><img src="img/live_icon07.png"></a>
							<a href="javascript:;"><img src="img/live_icon08.png"></a>
						</div>
					</div>
					<div class="video-pop">
						<a class="video-pop-close" href="javascript:;">×<a>
						<label><input type="checkbox">不再提示</label>
						<div class="video-pop-left">
							<img src="img/live_code01.png">
							<h2>雨露众德教育集团</h2>
							<p>守护每一份寄托<br>灌溉每一份希望</p>
						</div>
						<div class="video-pop-right">
							<img src="img/live_code02.png">
							<p>扫描二维码下载</p>
						</div>
					</div>
					<div class="eval-pop">
						<a class="eval-pop-close" href="javascript:;">×<a>
						<h2>觉得本节课程内容如何？</h2>
						<p>给该课程打分：<i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><span>(5分)</span></p>
						<textarea placeholder="本节课听懂了吗？讲课详细吗？有什么建议 赶快写下来吧，我们将根据意见进行课程完 善。"></textarea>
						<a class="eval-pop-btn" href="javascript:;">提交建议</a>
					</div>
				</div>
				
			</div>
			<img style="width:100%;" src="img/live_banner.jpg" />
			
		</div>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script>
		//收起
		$(".bar li").eq(1).click(function(){
			$(".bar").css("left","-110px");
			$(".ask").hide();
			$(".kua-jy").hide();
			$(".kua-dy").hide();
		})
		
		//提问
		$(".bar li:eq(2) a").click(function(){
			$(".bar li:eq(2)").addClass("on").siblings().removeClass("on");
			$(".ask").show();
			$(".kua-jy").hide();
			$(".kua-dy").hide();
		})
		
		//提问确认
		$(".ask-btn").click(function(){
			alert("提交成功")
			$(".ask").hide();
			
			$(".bar li:eq(2)").removeClass("on")
		})
		
		$(".ask textarea").focus(function (){
			if($(this).val() == "请输入您想提出的问题"){
				$(this).val("")
			}
		})
		$(".ask textarea").blur(function (){
			if($(this).val() == ""){
				$(this).val("请输入您想提出的问题")
			}
		})
		
		//答疑
		$(".bar li:eq(3) a").click(function(){
			$(".bar li:eq(3)").addClass("on").siblings().removeClass("on");
			$(".ask").hide();
			$(".kua-jy").hide();
			$(".kua-dy").show();
		})
		
		//讲义
		$(".bar li:eq(4) a").click(function(){
			$(".bar li:eq(4)").addClass("on").siblings().removeClass("on");
			$(".kua-jy").show();
			$(".ask").hide();
			$(".kua-dy").hide();
		})
		
		//二维码弹框关闭
		$(".video-pop-close").click(function(){
			$(".video-pop").fadeOut();
		})
		
		//课程星星评分
		$(".eval-pop p i").hover(function(){
			var count = $(this).index();
			$(".eval-pop p i").removeClass("on");
			for(var i = 0; i<count+1; i++){
				$(".eval-pop p i").eq(i).addClass("on");
				$(".eval-pop p span").html("("+ (i+1) +"分)");
			}
			
		})
		
		//课程评价弹框关闭
		$(".eval-pop-close").click(function(){
			$(".eval-pop").fadeOut();
		})
		
		
	</script>
	</body>
</html>
